<template>
  <page-wrap back hide-tab title="历史试题" stay-still :bg-color="uNavColor">
    <InterViewNavbg />
    <view class="carrer">{{ info.career.ylPositionName }}</view>
    <view>
      <scroll-view
        class="scrollView"
        scroll-y
        enable-flex
        @scrolltolower="loadMore"
        :refresher-triggered="triggered"
      >
        <view
          class="allContaienr"
          @click="clickCell(item)"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="textFlex">
            <text class="itemName">{{ item.interviewTitle }}</text>
            <text class="itemResultNum"
              >共计<text class="red">{{ item.questionTotalNum }}</text
              >道题目</text
            >
          </view>
          <u-image
            v-if="selectedItemIds.includes(item.questionId)"
            width="40rpx"
            height="40rpx"
            :src="selectedIcon"
          ></u-image>
        </view>

        <u-loadmore
          v-if="list.length > 0 || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && list.length <= 0"
          :baseImg="emptyImg"
          text="暂无数据"
          :fontWeight="400"
        />
      </scroll-view>
      <view class="tool">
        <view class="tool-textContent">
          <text style="margin-left: 50rpx"
            >已选题目： <text>{{ selectedItems.length }}</text></text
          >
          <text class="tool-btn-check" @tap="clickAllSelected">查看明细</text>
          <view class="tool-btn-comp" @tap="clickNext">完成创建</view>
        </view>
      </view>

      <u-popup
        v-model="showQuestions"
        mode="bottom"
        height="60%"
        border-radius="14"
      >
        <view class="list-content">
          <view class="content-title">已选题目</view>
          <scroll-view
            scroll-y="true"
            style="height: auto; background-color: rgb(240, 239, 239)"
          >
            <view
              class="allContaienr"
              @click.stop="clickCell(item)"
              v-for="(item, index) in selectedItems"
              :key="index"
            >
              <text class="itemName">{{ item.interviewTitle }}</text>
              <u-image
                width="40rpx"
                height="40rpx"
                :src="aiInterviewDelImg"
                :lazy-load="true"
              ></u-image>
            </view>
          </scroll-view>
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import InterviewCell from "./components/InterviewCell.vue";
import {
  getCompanyHistoryInterview,
  getCompanyInterviewCreate,
} from "@/api/modules/company";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    Empty,
    InterviewCell,
    InterViewNavbg,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),

      showQuestions: false,
      list: [],
      selectedItems: [],
      selectedItemIds: [],
      info: {
        id: "273875",
        title: "",
        career: {
          ylPositionId: 1233,
          ylPositionName: "java开发工程师",
        },
        beginDate: "",
        endDate: "",
      },
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      // exampleImg: this.$imgBaseSelf + "resume/example.png",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      selectedIcon: this.$imgBaseSelf + "library/selected.png",
      aiInterviewDelImg: this.$imgBaseSelf + "interview/aiInterviewDel.png",

      finished: false,
      loading: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },
  onLoad(options) {
    if (options && options.info) {
      const obj = JSON.parse(options.info);
      this.info = obj;
      console.log(obj);
    }
    this.getData(false);
  },
  methods: {
    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.getData(false);
    },
    getData(isMore) {
      if (!this.info.id) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        this.pageParams.pageNo = 1; // 刷新数据
      }
      const params = {
        companyId: this.companyId,
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        ylPositionId: this.info.id,
      };
      this.moreLoading = "loading";

      getCompanyHistoryInterview(params)
        .then((res) => {
          console.log(
            "🚀 ~ file: interviewHistory.vue:176 ~ getCompanyHistoryInterview ~ res:",
            res
          );
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },

    clickCell(item) {
      let questionId = item.questionId;
      var a = this.selectedItemIds;
      var b = this.selectedItems;

      const hasSameElement = a.includes(questionId);
      if (hasSameElement) {
        const index = a.indexOf(questionId);
        a.splice(index, 1);
        b.splice(index, 1);
      } else {
        a.push(questionId);
        b.push(item);
      }
    },
    clickMore() {
      console.log("00000");
    },
    clickAllSelected() {
      this.showQuestions = true;
    },
    clickNext() {
      if (this.selectedItemIds.length == 0) {
        uni.showToast({
          title: "请选择面试题目",
          icon: "none",
        });
        return;
      }

      const params = {
        companyId: this.companyId,
        userId: this.personId,
        interviewTitle: this.info.title,
        ylPositionId: this.info.id,
        validStartTime: this.info.beginDate,
        validEndTime: this.info.endDate,
        questionIds: this.selectedItemIds,
      };
      getCompanyInterviewCreate(params).then((res) => {
        console.log(
          "🚀 ~ file: interviewChoice.vue:279 ~ getCompanyInterviewIssuesDB ~ res:",
          res
        );
        if (res.code == 200) {
          uni.reLaunch({
            url: "/pagesSub/companyCenter/interviewAI/interviewHome",
          });
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.carrer {
  margin-left: 32rpx;
  margin-top: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
}

.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 64rpx - 150rpx);
}

.allContaienr {
  display: flex;
  background: white;
  border-radius: 32rpx;
  justify-content: space-between;
  flex-direction: row;
  padding: 32rpx;
  margin: 32rpx;
  align-items: center;

  .textFlex {
    display: flex;
    flex-direction: column;
  }

  .itemName {
    font-size: 16px;
    color: #222222;
  }
  .itemName1 {
    font-size: 16px;
    color: #a72727;
  }

  .itemRightBtn {
    display: flex;
    align-items: center;
    color: #066bff;
  }

  .red {
    font-size: 32rpx;
    color: #f75a3e;
    margin: 0 10rpx;
  }

  .itemResultNum {
    margin-top: 16rpx;
    font-size: 28rpx;
    color: #555555;
  }
}

.tool {
  display: flex;
  height: 150rpx;
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  background-color: rgb(246, 248, 250);
  align-items: center;
  z-index: 1;

  .tool-textContent {
    background-color: white;
    height: 90rpx;
    border-radius: 45rpx;
    position: absolute;
    right: 0rpx;
    left: 0rpx;
    align-items: center;
    display: flex;
    overflow: hidden;

    .tool-btn-comp {
      background: #f75a3e;
      position: absolute;
      right: 0;
      height: 100%;
      display: flex;
      align-items: center;
      width: 200rpx;
      justify-content: center;
      color: white;
    }
    .tool-btn-check {
      position: absolute;
      right: 220rpx;
      height: 100%;
      display: flex;
      align-items: center;
      color: #f75a3e;
    }
  }
}

.list-content {
  background-color: rgb(240, 239, 239);
  height: 100%;
  .content-title {
    height: 120rpx;
    font-weight: bold;
    text-align: center;
    padding-top: 50rpx;
    font-size: 36rpx;
  }
}
</style>
